<template>
  <div id="map"></div>
</template>

<script>
import AMap from "AMap";
export default {
  data() {
    return {
      map: null,
    };
  },
  mounted() {
    this.MapInit();
  },
  methods: {
    MapInit() {
      let district = new AMap.DistrictSearch({
        subdistrict: 0,
        extensions: "all",
        level: "city",
      });
      let map,bounds,mask=[];
      
      district.search("广宗县", function (status, result) {
        bounds = result.districtList[0].boundaries;
        for (let i = 0; i < bounds.length; i += 1) {
          mask.push([bounds[i]]);
        }
        map = new AMap.Map('map', {
          mask: mask,
          center: [115.172766,37.004795],
          disableSocket: true,
          viewMode: "3D",
          showLabel: true,
          labelzIndex: 130,
          pitch: 45,
          mapStyle: "amap://styles/343351c6dc7a0dd48ba5969d59d85564",
          zoom: 11.5,
        });
        //添加高度面
        let object3Dlayer = new AMap.Object3DLayer({
          zIndex: 0,
        });
        map.add(object3Dlayer);
        let wall = new AMap.Object3D.Wall({
          path: bounds,
          height: -3000,
          color: "#0088ffcc",
        });
        wall.transparent = true;
        object3Dlayer.add(wall);
        //添加描边
        for (let i = 0; i < bounds.length; i += 1) {
          new AMap.Polyline({
            path: bounds[i],
            strokeColor: "#99ffff",
            strokeWeight: 4,
            map: map,
          });
        };
      });
    },
    setZoomv() {
      this.map.setZoom(10)
    }
  },
};
</script>
<style scoped>
#map {
  width: 100%;
  height: 100%;
}
</style>